import { Form, Input, Toast, Button, InputType, Select } from 'esy-ui';
import { observer } from 'mobx-react-lite';
import { useMemo } from 'react';
import { Header } from '@/components';
import { form_ipt_com, form_slt_suffix_com } from '@/styles/esy-ui';
import { useFormatText } from '@/hooks';
import { useGlobalStore, useUserInfoStore } from '@/mobx';
import { postUpdateFundPwd } from '@/services';
import SendCode from '../safety/SendCode';

const FormItem = Form.Item;

/** 资金密码修改 */
const editFundPwd = {
  title: 'text_127',
  formItmes: [
    {
      name: 'Type',
      label: 'text_128',
      default: '2',
      itemType: 'bindType',
    },
    {
      name: 'BindInfo',
      label: 'text_130',
      disabled: true,
    },
    {
      name: 'FundPassword',
      label: 'text_113',
      type: 'password',
      maxLength: 12,
    },
    {
      name: 'ConfirmPassword',
      label: 'text_125',
      type: 'password',
      maxLength: 12,
    },
    {
      name: 'VerfiyCode',
      label: 'text_120',
      isSend: true,
      maxLength: 6,
    },
  ],
};

function UpdateFundPwd() {
  const [form] = Form.useForm();
  const { userInfo, changeUserInfo } = useUserInfoStore();
  const { text } = useFormatText();
  const { changeState } = useGlobalStore();

  // 绑定方式选择
  const options = useMemo(() => {
    const arr = [];
    if (userInfo?.Mobile) {
      arr.push({ text: text('text_110'), value: '2' });
    }
    if (userInfo?.Email) {
      arr.push({ text: text('text_111'), value: '3' });
    }
    // 绑定信息
    setTimeout(() => {
      if (userInfo?.Mobile) {
        form.setFieldValue('BindInfo', userInfo?.Mobile);
      } else if (userInfo?.Email) {
        form.setFieldValue('BindInfo', userInfo?.Email);
      }
    }, 100);
    return arr;
  }, [userInfo?.Mobile, userInfo?.Email, text, form]);

  const onSubmit = () => {
    changeState('isLoading', true);
    form
      .validate()
      .then((values) => {
        if (Object.values(values).some((it) => !it)) {
          changeUserInfo({ IsFund: true } as any);
          Toast.show({ content: text('text_88') });
          changeState('isLoading', false);
        } else {
          postUpdateFundPwd(values)
            .then(() => {
              Toast.show({ content: text('text_129') });
            })
            .catch(() => {})
            .finally(() => {
              changeState('isLoading', false);
            });
        }
      })
      .catch(() => {
        changeState('isLoading', false);
      });
  };

  return (
    <div className='bg-body w-full h-full flex flex-col'>
      <Header title={editFundPwd.title} />
      <Form form={form} className='text-xs flex flex-col flex-1 px-2.5 p-4'>
        <div className='flex-1'>
          {editFundPwd.formItmes.map((it) => {
            if (it.itemType === 'bindType') {
              return (
                <FormItem key={it.name} name={it.name} formlabel={text(it.label)} initialValue={userInfo?.Mobile ? '2' : '3'}>
                  <Select
                    classNames={{ input: form_ipt_com, suffix: form_slt_suffix_com }}
                    options={options}
                    onSelect={(e) => {
                      form.setFieldValue('BindInfo', e.value === '2' ? userInfo?.Mobile : userInfo?.Email);
                    }}
                  />
                </FormItem>
              );
            }
            return (
              <FormItem key={it.name} name={it.name} formlabel={text(it.label)} initialValue={it.default}>
                <Input
                  disabled={it.disabled}
                  type={(it.type as InputType) ?? 'text'}
                  classNames={form_ipt_com}
                  maxLength={it.maxLength}
                  suffix={it.isSend ? <SendCode form={form} conKey='editFundPwd' /> : null}
                />
              </FormItem>
            );
          })}
        </div>
        <Button className='rounded mt-3' htmltype='submit' onClick={onSubmit}>
          {text('text_93')}
        </Button>
      </Form>
    </div>
  );
}

export default observer(UpdateFundPwd);
